<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          通知发布
        </p>
        <Row type="flex" justify="space-between">
          <div>
            标题：<Input v-model="searchparam.title" placeholder="标题关键字" style="width: 200px;margin-right: 4px;"
                      clearable/>
            发布时间：
            <DatePicker type="date" placeholder="开始时间" v-model="searchparam.bTime"
                        @on-change="searchparam.bTime=$event"
                        style="width: 160px"></DatePicker>
            <DatePicker type="date" placeholder="结束时间" v-model="searchparam.eTime"
                        @on-change="searchparam.eTime=$event"
                        style="width: 160px"></DatePicker>
            <div class="db_inline" @click="searchFn">
              <Button type="primary" style="margin: 0 4px 0 5px;">
                <Icon type="ios-search-strong" size="15" style="padding: 0 3px 0 0;"></Icon>
                搜索
              </Button>
            </div>
            <div class="db_inline" @click="restFn">
              <Button style="margin-right: 4px;">刷新</Button>
            </div>
          </div>
          <div class="control">
            <Button @click="addFn" type="info">
              <Icon type="plus-round"></Icon>
              <span>添加</span>
            </Button>
            <slot name="operation"></slot>
          </div>
        </Row>
        <Row class="margin-top-10">
          <Table ref="selection" :height='tableHeight' :columns="tableColumns" :data="dataTable"></Table>
        </Row>
        <Row type="flex" justify="end" class="footer">
          <div class="margin-top-10">
            <Page :total="searchparam.total" :current="searchparam.current" :page-size="searchparam.size"
                  @on-change="changeFn" show-elevator></Page>
          </div>
        </Row>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" :mask-closable="false" width='60%' @on-cancel="completeFn">
      <Form ref="formRef" :model="modal.form" :label-width="100" label-position="right" :rules="modal.rules">
        <Row>
          <Col span="10">
            <Card>
              <p slot="title">
                通知信息
              </p>
              <div style="height: 500px">
                <FormItem label="标题" prop="title">
                  <Input v-model="modal.form.title" :readonly="modal.isCheck" style="width:90%"
                         :disabled="modal.disabled"/>
                </FormItem>
                <FormItem label="过期时间" prop="expireTime">
                  <DatePicker type="date" placeholder="开始时间" :options="options" v-model="modal.form.expireTime"
                              @on-change="($event)"
                              style="width:90%"></DatePicker>
                </FormItem>
                <FormItem label="通知内容" prop="content">
                  <Input v-model="modal.form.content" :readonly="modal.isCheck" type="textarea" style="width:90%"
                         :disabled="modal.disabled"
                         :rows="12"/>
                </FormItem>
              </div>
            </Card>
          </Col>
          <Col span="14">
            <Card>
              <p slot="title">
                接收通知对象
              </p>
              <div style="height: 500px">
                <Menu mode="horizontal" theme="light" active-name="teacher" @on-select="menuSelect">
                  <MenuItem name="teacher" style="font-size: 18px">
                    <Icon type="person"></Icon>
                    教师
                  </MenuItem>
                  <MenuItem name="kinsfolk" style="font-size: 18px">
                    <Icon type="person-stalker"></Icon>
                    家长
                  </MenuItem>
                </Menu>
                <div style="margin-top: 20px;overflow-y: auto;height: 400px" v-show="type.active==='teacher'">
                  <div v-if="!modal.isCheck">
                    <Checkbox style="margin: 0 0 0 20px;font-weight: bold"
                              @on-change="selectAllTeacher">全选 / 全不选
                    </Checkbox>
                  </div>
                  <div>
                    <div class="list_box">
                      <CheckboxGroup v-model="modal.form.teacherIdList">
                        <Checkbox style="font-size: 16px"
                                  v-for="(item, index) in teacherList" :key="index" :label="item.id">{{item.name}}
                        </Checkbox>
                      </CheckboxGroup>
                    </div>
                  </div>
                </div>
                <div style="margin: 20px 0 0 20px" v-show="type.active==='kinsfolk'">
                  <div v-if="!modal.isCheck">
                    <Checkbox style="font-weight: bold"
                              @on-change="selectAllKinsfolk">全选 / 全不选
                    </Checkbox>
                  </div>
                  <div class="list_box">
                    <CheckboxGroup v-model="modal.form.kinsfolkIdList">
                      <Checkbox style="font-size: 16px"
                                v-for="(item, index) in kinsfolkList" :key="index" :label="item.id">{{item.name}}
                      </Checkbox>
                    </CheckboxGroup>
                  </div>
                </div>
              </div>
            </Card>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" @click="completeFn">取消</Button>
        <Button v-if="!modal.isCheck" type="primary" @click="submitFn" :loading="modal.loading">
          发布
        </Button>
        <Button v-if="modal.isCheck" type="primary" @click="completeFn">
          关闭
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import Cookies from 'js-cookie';

  export default {
    data() {
      return {
        options: {
          disabledDate(date) {
            return date < new Date();
            ;
          }
        },
        type: {
          active: 'teacher'
        },
        teacherList: [],
        kinsfolkList: [],
        tableHeight: '',
        modalDelete: false,
        searchparam: {
          bTime: '',
          eTime: '',
          title: '',
          current: 1,
          size: 20
        },
        modal: {
          isCheck: false,
          loading: false,
          title: "",
          visible: false,
          form: {
            title: '',
            expireTime: '',
            content: '',
            kinsfolkIdList: [],
            teacherIdList: [],
          },
          rules: {
            'title': [{
              required: true,
              message: '请输入标题',
              trigger: 'blur'
            }],
            'expireTime': [{
              required: true,
              type: 'date',
              message: '必填项',
              trigger: 'blur'
            }],
            'content': [{
              required: true,
              message: '请输入内容',
              trigger: 'blur'
            }]
          }
        },
        dataTable: [],
        tableColumns: [
          {title: '序号', type: 'index', minWidth: 90, align: 'center'},
          {title: '标题', key: 'title', minWidth: 200, align: 'center'},
          {title: '发布时间', key: 'createTime', minWidth: 150, align: 'center'},
          {
            title: '操作',
            key: 'operation',
            minWidth: 120,
            align: 'center',
            render: (h, param) => {
              let feedbackBtn = h('Button', {
                props: {type: 'info', size: 'small'},
                style: {marginRight: '5px'},
                on: {
                  click: () => {
                    this.feedFn(param.row)
                  }
                }
              }, '阅读反馈');
              let checkBtn = h('Button', {
                props: {type: 'info', size: 'small'},
                style: {marginRight: '5px'},
                on: {
                  click: () => {
                    this.checkFn(param.row)
                  }
                }
              }, '查看');
              let delBtn = h('Button', {
                props: {type: 'error', size: 'small'},
                style: {marginRight: '5px'},
                on: {
                  click: () => {
                    this.deleteFn(param.row)
                  }
                }
              }, '删除');
              let kinsfolkList = param.row.kinsfolkList;
              let btnArray = [checkBtn, delBtn];
              if (kinsfolkList.length > 0) {
                btnArray.push(feedbackBtn);
              }
              return h('div', {}, btnArray);
            }
          }
        ],
      };
    },
    methods: {
      selectAllTeacher(status) {
        let teacherList = this.teacherList;
        if (status) {
          this.modal.form.teacherIdList = [];
          for (let i in teacherList) {
            this.modal.form.teacherIdList.push(teacherList[i].id);
          }
        } else {
          this.modal.form.teacherIdList = [];
        }
      },
      selectAllKinsfolk(result) {
        let kinsfolkList = this.kinsfolkList;
        if (result) {
          this.modal.form.kinsfolkIdList = [];
          for (let i in kinsfolkList) {
            this.modal.form.kinsfolkIdList.push(kinsfolkList[i].id);
          }
        } else {
          this.modal.form.kinsfolkIdList = [];
        }
      },
      menuSelect(name) {
        this.type.active = name;
      },
      restFn() {
        this.searchparam.current = 1;
        this.searchparam.size = 20;
        this.searchparam.title = "";
        this.searchparam.bTime = "";
        this.searchparam.eTime = "";
        this.queryFn();
      },
      addFn() {
        Object.assign(this.modal, {
          title: "新增通知",
          visible: true,
          form: {teacherIdList: [], kinsfolkIdList: []},
          isCheck: false,
        });
      },
      feedFn(data) {
        this.$router.push({
          path: '/notice-feedback',
          query: {
            nId: data.id,
            n: data.title,
          }
        })
      },
      checkFn(data) {
        Object.assign(this.modal, {
          title: "查看",
          visible: true,
          isCheck: true,
        });
        Object.assign(this.modal.form, data);
        let teacherList = data.teacherList;
        for (let i in teacherList) {
          this.modal.form.teacherIdList.push(teacherList[i].teacherId);
        }
        let kinsfolkList = data.kinsfolkList;
        for (let i in kinsfolkList) {
          this.modal.form.kinsfolkIdList.push(kinsfolkList[i].kinsfolkId);
        }
      },
      completeFn() {
        this.modal.loading = false;
        this.modal.visible = false;
        this.$refs.formRef.resetFields();
      },
      getTeacher() {
        API.fetchTeacherList().then(
          res => {
            this.teacherList = res.data;
            for (let i in this.teacherList) {
              this.$set(this.teacherList[i], "checked", false);
            }
          },
          error => {
            this.$Message.info(error.response.data.msg);
          }
        );
      },
      queryFn() {
        API.fetchNotice(this.searchparam).then(
          res => {
            this.dataTable = res.data.records;
            this.searchparam.total = res.data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      fetchKinsfolkList() {
        API.fetchKinsfolkList().then(
          res => {
            this.kinsfolkList = res.data;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      deleteFn(data) {
        this.$Modal.confirm({
          title: '警告',
          content: '是否删除已发出的通知？',
          onOk: () => {
            API.deleteNotice({id: data.id}).then(resp => {
              this.queryFn();
            })
          }
        });
      },
      searchFn(text) {
        this.searchparam.current = this.$search.param.current;
        this.queryFn();
      },
      submitFn() {
        this.$refs.formRef.validate(valid => {
          if (valid) {
            if (this.modal.form.teacherIdList.length === 0 && this.modal.form.kinsfolkIdList.length === 0) {
              this.$Message.error('请选择接收通知的人');
              return;
            }
            let data = Object.assign({}, this.modal.form);
            this.modal.loading = true;
            API.createNotice(data).then(
              res => {
                this.completeFn();
                this.queryFn();
              },
              error => {
                this.modal.loading = false;
                this.$Message.info(error.msg);
              }
            );
          } else {
            return false;
          }
        });
      },
      changeFn(val) {
        this.searchparam.current = val;
        this.queryFn();
      },
    },
    mounted() {
      this.queryFn();
      this.getTeacher();
      this.fetchKinsfolkList();
      this.tableHeight = window.innerHeight - this.$refs.selection.$el.offsetTop - 294;

    }
  };
</script>
<style type="text/css" scoped>
  .sent_label:before {
    content: '*';
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 12px;
    color: #ff3300;
  }

  .status_search {
    margin: 0 0 0 20px;
  }

  .table_content {
    width: 100%;
    max-height: 88%;
    padding: 20px 0;
    overflow: hidden;
    overflow-y: auto;
  }

  .table_list {
    width: 100%;
    border: 1px solid #e3e8ee;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #657180;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .table_list tr th, .table_list tr td {
    text-align: center;
    border-bottom: 1px solid #e3e8ee;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    border-bottom: 1px solid #e3e8ee;
  }

  .table_list tr th {
    height: 40px;
    font-weight: 700;
  }

  .table_list tr td {
    height: 48px;
  }

  .table_list tr:first-child:hover {
    background: none;
  }

  .table_list tr:hover {
    background: #ebf7ff;
  }

  .table_list tr:last-child td {
    border-bottom: none;
  }

  td.content_box, th.content_box {
    max-width: 300px;
  }

  .btn_list {
    margin: 0 0 10px 0;
  }

  .footer {
    background: #fff;
    padding: 0 16px 15px 0;
  }

  .list_box {
    height: 83%;
    padding: 20px;
    overflow: hidden;
    overflow-y: auto;
    line-height: 30px;
  }

  .tea_select {
    position: relative;
  }

  .tea_select:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: 16px;
    position: absolute;
    right: 10px;
  }

  .all_btn, .teacher_list {
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    text-align: center;
    margin: 0 10px 10px 0;
    border-radius: 4px;
    cursor: pointer;
  }

  .teacher_selected {
    color: #fff;
    border: 1px solid #2db7f5;
    background: #2db7f5;
  }

  .all_selected {
    color: #fff;
    border: 1px solid #f90;
    background: #f90;
    cursor: pointer;
  }

  .selsect_footer button {
    width: 100%;
    text-align: center;
    color: #2db7f5;
  }

  .two_name {
    letter-spacing: 5px;
  }

</style>
